<template>
    <div class="main-right-wrapper">
        <div class="main-right-top">
            <div class="main-right-title-one">
                <p>馆藏分布</p>
            </div>
            <div class="main-right-box-one">
                <dv-conical-column-chart :config="config" style="width:90%;height:100%;" />
            </div>
        </div>
        <div class="main-right-center">
            <div class="main-right-title-two">
                <p>图书受欢迎程度统计</p>
            </div>
            <div class="main-right-box-two">
                <chartsPop></chartsPop>
            </div>
        </div>
        <div class="main-right-bottom">
            <div class="main-right-title-three">
                <p>图书馆最新活动一览</p>
            </div>
            <div class="main-right-box-three">
                <el-carousel :interval="3000" height="2.5rem" arrow="always">
                    <el-carousel-item v-for="item in imgUrl" :key="item.id">
                        <img :src="item.url" class="image-item">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
    import chartsPop from "./chartsPop";
    export default {
        name: "mainRight",
        data(){
            return{
                config:{
                    data: [
                        {
                            name: '计算机类',
                            value: 55
                        },
                        {
                            name: '文学类',
                            value: 120
                        },
                        {
                            name: '医学类',
                            value: 71
                        },
                        {
                            name: '美术类',
                            value: 66
                        },
                        {
                            name: '建筑类',
                            value: 80
                        },
                        {
                            name: '小说',
                            value: 35
                        },
                    ],
                    showValue: true
                },
                imgUrl:[
                    {url:require('../../../assets/1.jpg'),id:1},
                    {url:require('../../../assets/4.jpg'),id:2},
                    {url:require('../../../assets/5.jpg'),id:4},
                ]
            }
        },
        components:{
            chartsPop
        }
    }
</script>

<style scoped lang="less">
    .main-right-wrapper{
        display: flex;
        flex-direction: column;
        padding: 0.25rem;
        width: 6rem;
        height: 9rem;
        .main-right-top{
            flex: 1;
            display: flex;
            flex-direction: column;
            .main-right-title-one{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0.5rem;
                width: 100%;
                color: #daa346;
                font-size: 0.2rem;
            }
            .main-right-box-one{
                height: 2.5rem;
                width: 100%;
                background-color: #070D54;
                border-radius: 0.25rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .main-right-center{
            flex: 1;
            display: flex;
            flex-direction: column;
            .main-right-title-two{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0.5rem;
                width: 100%;
                color: #daa346;
                font-size: 0.2rem;
            }
            .main-right-box-two{
                height: 2.5rem;
                width: 100%;
                background-color: #070D54;
                border-radius: 0.25rem;
            }
        }
        .main-right-bottom{
            flex: 1;
            display: flex;
            flex-direction: column;
            .main-right-title-three{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0.5rem;
                width: 100%;
                color: #daa346;
                font-size: 0.2rem;
            }
            .main-right-box-three{
                height: 2.5rem;
                width: 100%;
                background-color: #070D54;
                border-radius: 0.25rem;
                overflow: hidden;
            }
        }
    }
    .image-item{
        width: 100%;
        height: 2.5rem;
    }
</style>
